<template>
    <Card :bordered="false" dis-hover class="list-table-list-card ivu-mt" ref="card" style="height: 100%;width:100%">
        <Form v-if="search.isShow" ref="form" :model="searchForm" :rules="rules" :label-width="search.labelwidth?search.labelwidth:140" label-position="right">
            <Row :gutter="24" type="flex" :justify="search.justify">
                <template v-for="(item,index) in search.info">
                    <Col v-bind="grid" :key="item.key" v-if="index <= 2?true:collapse">
                    <FormItem :label="item.label" :prop="item.key|fetProp(Object.keys(searchForm))" :label-width="item.labelWidth">
                        <Input v-if="item.type=='input'" :show-word-limit="item.showwordlimit " :maxlength="item.maxlength" v-model="searchForm[item.key]" :placeholder="item.placeholder" :style="item.style" :size="item.size"></Input>
                        <Select :filterable="item.filterable" @on-query-change='onQueryChange' v-if="item.type=='select'" @on-change="selectChange(searchForm[item.key],item)" clearable v-model="searchForm[item.key]" :placeholder="item.placeholder" :element-id="item.key" :style="item.style" :size="item.size">
                            <Option v-for="item in item.select" :value="item.value" :key="item.value">{{item.label}}</Option>
                        </Select>
                        <DatePicker v-if="item.type=='datePicker'" @on-change="searchForm[item.key]=$event" :type="item.dataType" v-width="'100%'" v-model="searchForm[item.key]" :placeholder="item.placeholder" :element-id="item.key+'date'" :style="item.style" :size="item.size" />
                        <CheckboxGroup v-if="item.type=='checkBox'" v-model="searchForm[item.key]" :style="item.style" :size="item.size">
                            <Checkbox v-for="(chItem,index) in item.checkBoxData" :key="index" :label="chItem.value">{{ chItem.lable }}</Checkbox>
                        </CheckboxGroup>
                        <RadioGroup v-if="item.type=='radio'" v-model="searchForm[item.key]">
                            <Radio v-for="(chItem,index) in item.radioData" :key="index" :label="chItem.value">{{ chItem.lable }}</Radio>
                        </RadioGroup>
                        <DatePicker v-if="item.type=='daterange'" :format="item.format" @on-change="searchForm[item.key]=$event" :type="item.dataType" v-width="'100%'" v-model="searchForm[item.key]" split-panels :placeholder="item.placeholder" :element-id="item.key+'date'" :style="item.style" :size="item.size"></DatePicker>
                        <Cascader v-if="item.type=='cascader'" :change-on-select="item.changeOnSelect" v-model="searchForm[item.key]" :data="item.select" :size="item.size"></Cascader>
                        <TreeSelect v-if="item.type=='treeSelect'" @on-change="onTreeChange(bindData[item.key],item)" v-model="bindData[item.key]" :placeholder="item.placeholder" :data="item.data" />
                        <component v-if="item.type == 'component'" :ref="item.key" :is="item.component" @comSetData="comSetData" />
                    </FormItem>
                    </Col>
                </template>
                <Col v-bind="grid" class="ivu-text-right">
                <FormItem>
                    <Button type="primary" :size="search.buttonSize" @click="seach">查询
                    </Button>
                    <Button class="ivu-ml-8" :size="search.buttonSize" @click="reset('form')">重置
                    </Button>
                    <a v-font="14" class="ivu-ml-8" @click="collapse = !collapse" v-if="search.info.length > 3">
                        <template v-if="!collapse">
                            展开
                            <Icon type="ios-arrow-down" />
                        </template>
                        <template v-else>
                            收起
                            <Icon type="ios-arrow-up" />
                        </template>
                    </a>
                </FormItem>
                </Col>
            </Row>
        </Form>

        <itable ref="itable" :pageConfig="pageConfig" :tableConfig="table" @handleLoadData="handleLoadData" @on-fullscreen="onFullscreen" @on_select="on_select" @on_selectAll="on_selectAll" @on_selectOnchange="on_selectOnchange" @row-onCurrentChange="onCurrentChange">
            <template v-for="(item,index) in table.columns" v-slot:[item.slotTem]='data'>
                <!-- {{item.template.render(data.dataS,$select)}} -->
                <slot :name="item.slotTem" :dataS="data.dataS"></slot>
            </template>
        </itable>
    </Card>
</template>
<script>

import screenfull from 'screenfull';

import table from './table.vue'
import iheader from '../pageHeader/index.vue'
export default {
    name: 'search-table',
    props: ['search', 'table', 'pageConfig'],
    data() {
        this.bindData = {}
        for (const key in this.search.info) {
            if (this.search.info.hasOwnProperty.call(this.search.info, key)) {
                const infoItem = this.search.info[key];
                this.bindData[infoItem.key] = infoItem.default
            }
        }
        return {
            searchForm: this.bindData || {},
            collapse: false,
            rules: {},
            grid: {
                xl: 6,
                lg: 6,
                md: 12,
                sm: 24,
                xs: 24
            },
        };
    },
    components: {
        'i-header': iheader,
        'itable': table
    },
    computed: {},
    beforeMount() { },
    mounted() {
        if (this.search.isDefaultSearch) {
            this.$refs.itable.resetPage(this.searchForm);
        }
    },
    filters: {
        fetProp(name, array) {
            let a = array.filter((value, key) => { return value == name ? value : '' })
            return a[0]
        }
    },
    methods: {
        // 根据传输数组对象，key、value形式，动态给查询对象赋默认值。
        setData(_ayData, isSeach) {
            if (_ayData.length !== 0) {
                for (let i = 0; i < _ayData.length; i++) {
                    const item = _ayData[i];
                    this.searchForm[item.key] = item.value;
                }
                if (isSeach !== 'noSeach') {
                    this.seach()
                }
            }
        },
        seach() {// 查询方法
            // console.log('输出查询条件%o', this.searchForm)
            this.$refs.itable.resetPage(this.searchForm);
        },
        reset() {//重置方法
            this.$refs['form'].resetFields()
            this.$emit('resetTable', this.searchForm); // 重置时执行父级组件方法，可自定义执行其他操作。
            // console.log('重置查询条件%o', this.searchForm)
            this.$refs.itable.resetPage(this.searchForm);
        },
        // 操作表格方法
        onFullscreen(state) { // 列表全屏
            if (state) {
                screenfull.request(this.$refs.card.$el);
            } else {
                screenfull.exit();
            }
        },
        // table事件，选中某一项时触发
        on_select(row) {
            this.$emit('onSelect', row)
        },
        // table事件，全选时触发。
        on_selectAll(row) {
            this.$emit('onSelectAll', row)
        },
        // table事件，多选模式下，选中项发生变化时触发。
        on_selectOnchange(row) {
            this.$emit('onSelectOnchange', row)
        },
        // table事件，选中某一行触发，开启highlight-row时有效。currentRow当前高亮的数据，oldCurrentRow上一次高亮数据
        onCurrentChange(currentRow, oldCurrentRow) {
            this.$emit('onCurrentChange', currentRow, oldCurrentRow)
        },
        // table事件，树形表格，子节点动态加载。
        handleLoadData(item, callback) {
            this.$emit('handle-loadData', item, callback)
        },
        // 查询自定义组件
        comSetData(key, value) {
            this.searchForm[key] = value
        },
        comFunction(key, funcName, data) {
            // console.log('this.$refs%o',this.$refs)
            this.$refs[key][0][funcName](data)
        },
        // 下拉树选择变化
        onTreeChange(value, obj) {
            this.$emit('onTreeChange', value, obj)
        },
        onQueryChange(value,op){
            // console.log('===> value,op%o', value,op)
        },
        // 查询下拉选择值变化
        selectChange(value, obj) {
            this.$emit('onSeachSelectChange', { value: value, itemObj: obj })
        }
    },
    watch: {}
}
</script>
<style>
.list-table-list-card .ivu-card-head {
    display: none;
    border-bottom: 0px solid #e8eaec !important;
}
</style>
<style lang='less' scoped>
.list-table-list {
    &-card {
        &:fullscreen {
            overflow: auto;
            background: #fff;
        }
    }
}
</style>